<template>
  <div class="historicalSetting">
    <Bmap ref='baseMap'></Bmap>
    <!--弹窗 -->
    <div class="pop_pup">
      <div class="hst" style="display: flex;justify-content:flex-start;margin: 0.2rem 0">
        <el-date-picker
          v-model="year"
          type="year"
          clear-icon=""
          @change="gety"
        >
        </el-date-picker>
        <div style="width: .1rem;">

        </div>
        <el-select
          v-model="cardNum" clearable filterable @change="choose" placeholder="请选择卡编号">
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </div>


      <div style="height: 7.4rem;overflow: auto">
        <table v-show="distribution_Arr.length>0">
          <thead>
          <th>&nbsp;&nbsp;卡编号</th>
          <th>布设时间</th>
          <th>网格编号</th>
          <th>操作</th>
          </thead>
          <tbody>
          <tr v-for="da in distribution_Arr"
              :style="da.color?'background-color: #d8d8d8;':'background-color: #fff;'">
            <td>{{da.cameraCardId}}</td>
            <td>{{da.layTimeLong | cDate}}</td>
            <td>{{da.oneKmGridNum}}</td>
            <td>
              <span class='s_btn2' @click='location(da)'>定位</span>
              <span class='s_btn2' @click="lookdetails(da)">查看详情</span>
            </td>
          </tr>
          </tbody>
        </table>
        <span style="margin-left: .2rem;font-size: .18rem;font-weight: 700;" v-show="distribution_Arr.length==0">
            该时间段内暂无数据，↑↑↑可切换时间查看历史数据
        </span>
      </div>
    </div>
    <!--弹窗 -->

    <!--slideshow-->
    <slideshow ref="sli"></slideshow>
    <!--slideshow-->

  </div>
</template>

<script>
  import api from '../utils/api'
  import http from '../utils/http'
  import Bmap from './Map'
  export default {
    components: {
      'Bmap': Bmap
    },
    name: "HelloWorld",
    data() {
      return {
        year: new Date(),
        dateStr: "",
        cardNum: "",
        options: [],
        distribution_Arr: []
      };
    },
    created() {
      this.areaId = sessionStorage.getItem('areaId');
      this.getcar();
      let year = new Date().getFullYear();
      this.dateStr = year + '-01-01~' + year + '-12-31';

    },
    mounted(){
      let vm = this;
      setTimeout(function () {
        vm.$refs.baseMap.creationMap();
        vm.getall();
      },500)

    },
    methods: {
      accept(data) {
        if (data.name == '图集') {
          this.$refs.sli.acceptData(data.data);
        }
      },
      lookdetails(e) {
        this.distribution_Arr.forEach(t => {
          t.color = false
        })
        e.color = true;
        this.$router.push("/historicalSetting/setdetails")
        sessionStorage.setItem('HDD', JSON.stringify(e));
      },
      //获取卡编号
      getcar() {
        let vm = this;
        (async function () {
          let res = await http.get(api.infrared.cardNums + '?areaId=' + vm.areaId + '&keyWord')
          vm.options = res.data.data;
        })()
      },
      getall() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.allData + '?areaId=' + vm.areaId + '&dateStr=' + vm.dateStr + '&cardNum=' + vm.cardNum)
          if (res.data.status == 'success') {
            res.data.data.forEach(t => {
              t['color'] = false
            })
            vm.distribution_Arr = res.data.data;
            let arr = [];
            res.data.data.forEach(t => {
              let z = {
                id: t.id,
                name: "",
                borderColor: "#ffffff",
                fillColor: "#dd2c00",
                data: {
                  mtl: [],
                  id: t.id,
                  size: 1,
                  isdetails: true,
                  opennew: true,
                  isdetailsTetx: "查看详情",
                  isdetailsLink: {path: '/historicalSetting/setdetails', data: t},
                  mediaList: vm.incisionStr(t.urlStr)
                },
                geojson: {coordinates: [t.eastLongitude, t.northernLatitude], type: "Point"}
              }
              arr.push(z)
            })
            if (arr.length != 0) {
              vm.$refs.baseMap.previewshape(arr, "alread_Point");
            } else {
              vm.$refs.baseMap.dellayer("alread_Point");
            }
          }

        })()
      },
      //定位
      location(t) {
        var data = {
          mtl: [
            {name: "布设点", value: t.layNum},
            {name: "卡编号", value: t.cameraCardId},
            {name: "相机型号", value: t.cameraType},
            {name: "公里网格编号", value: t.oneKmGridNum},
            {name: "放置时间", value: this.timeTransition(t.layTimeLong)},
            {name: "天气", value: t.weather},
            {name: "计划回收", value: t.planRecovDate},
            {name: "小地名", value: t.smallLandNum},
            {name: "布设人员", value: t.layUser},
            {name: "坡度", value: t.slope},
            {name: "坡向", value: t.exposure},
            {name: "生境类型", value: t.envirType},
            {name: "森林起源", value: t.forestOrigin},
            {name: "小生境", value: t.smallEnvir},
            {name: "乔木高度", value: t.qiaomuHeight},
            {name: "乔木郁闭度", value: t.qiaomuCanopyDensity},
            {name: "乔木胸径", value: t.qiaomuBraHeight},
            {name: "乔木优势树种", value: t.arborEdgeSpecies},
            {name: "灌木高度", value: t.guanmuHeight},
            {name: "灌木盖度", value: t.guanmuCanopyDensity},
            {name: "灌木优势树种", value: t.shrubsAdvantageSpecies},
            {name: "干扰类型", value: t.interfType},
            {name: "干扰强度", value: t.interfStrength},
            {name: "干扰频率", value: t.interfRate},
            {name: "痕迹动物", value: t.traceAnimal},
            {name: "痕迹类型", value: t.traceType},
            {name: "总备注", value: t.remark},
          ],
          id: t.id,
          isdetails: true,
          isdetailsTetx: "查看详情",
          opennew: true,
          isdetailsLink: {path: '/historicalSetting/setdetails', data: t},
          mediaList: this.incisionStr(t.urlStr)
        }, lonlat = [t.eastLongitude, t.northernLatitude];
        this.$refs.baseMap.artificialLocation(data, lonlat);
      },
      gety(year) {
        var year = year.getFullYear();
        this.dateStr = year + '-01-01~' + year + '-12-31';
        this.getall();
      },
      choose() {
        this.getall();
      },
      //时间转换格式
      timeTransition(t) {
        if (t != '') {
          return this.$moment(t).format('YYYY-MM-DD');
        } else {
          return t
        }
      },
      //切割字符串
      incisionStr(e) {
        if (e != '' && e != '') {
          return e.split("#");
        } else {
          return []
        }
      },
    },
    beforeRouteLeave(to, from, next) {
      from.meta.keepAlive = false
      next()
    },
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.getall();
      })
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../static/css/historicalSetting.css";
</style>
<style>
  .hst .el-input__inner {
    height: .4rem;
    line-height: .4rem;
  }

  .hst .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 2.1rem;
  }

  .hst .el-input__icon, .el-icon-date {
    line-height: .4rem;
  }

  .hst .el-select {
    width: 2.1rem;
  }
</style>
